<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/首页.css" />
    <script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="美食菜谱图标/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <link rel="stylesheet" href="css/swiper.min.css">
	
</head>

<body>
    <header>
        <span id="select" class="iconfont icon-weimingmingwenjianjia_sousuo">搜菜名.食材</span>
        <input class="sousuo-ipt" type="text" name="" id="" value="" placeholder="" />
        <ul class="list">

        </ul>
    </header>
    <main>
        
            <!-- <ul class="ban">
                <li><img src="img/wanted1.jpg"></li> 
                <li><img src="img/wanted2.jpg"></li>
                <li><img src="img/wanted3.jpg"></li>
            </ul> -->

            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Slide 1</div>
                    <div class="swiper-slide">Slide 2</div>
                    <div class="swiper-slide">Slide 3</div>
                    
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
                
            </div>
        <div id="nav">
            <ul>
                <li><a href="#"><span><img src="img/wanted1.jpg" ></span>冬日温补</a></li>
                <li><a href="#"><span><img src="img/wanted1.jpg" ></span>冬日温补</a></li>
                <li><a href="#"><span><img src="img/wanted1.jpg" ></span>冬日温补</a></li>
                <li><a href="#"><span><img src="img/wanted1.jpg" ></span>冬日温补</a></li>
                <li><a href="#"><span><img src="img/wanted1.jpg" ></span>冬日温补</a></li>
            </ul>
        </div>
        <div id="tab">
            <ul id="uls">
                <li class="liss"><a href="#">早餐</a></li>
                <li><a href="#">午餐</a></li>
                <li><a href="#">晚餐</a></li>
                <li><a href="#">夜宵</a></li>
            </ul>
            <div class="big-box">
                <dl class="active">
                    <dt><img src="img/wanted1.jpg" ></dt>
                    <dd>蓝蓝莓蓝莓莓</dd>
                    <dd>蓝莓蓝莓蓝蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓莓蓝莓蓝莓蓝莓蓝莓蓝莓</dd>
                    <span class="iconfont icon-favorite
"></span>
                    <dd>888</dd>
                    <span class="iconfont icon-dianzan
"></span>
                    <dd>888</dd>
                </dl>
                <dl class="active">
                    <dt><img src="img/wanted1.jpg" ></dt>
                    <dd>蓝蓝莓蓝莓莓</dd>
                    <dd>蓝莓蓝莓蓝蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓莓蓝莓蓝莓蓝莓蓝莓蓝莓</dd>
                    <span class="iconfont icon-favorite
				"></span>
                    <dd>888</dd>
                    <span class="iconfont icon-dianzan
				"></span>
                    <dd>888</dd>
                </dl>
                <dl class="active">
                    <dt><img src="img/wanted1.jpg" ></dt>
                    <dd>蓝蓝莓蓝莓莓</dd>
                    <dd>蓝莓蓝莓蓝蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓莓蓝莓蓝莓蓝莓蓝莓蓝莓</dd>
                    <span class="iconfont icon-favorite
								"></span>
                    <dd>888</dd>
                    <span class="iconfont icon-dianzan
								"></span>
                    <dd>888</dd>
                </dl>
                <dl class="active">
                    <dt><img src="img/wanted1.jpg" ></dt>
                    <dd>蓝蓝莓蓝莓莓</dd>
                    <dd>蓝莓蓝莓蓝蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓莓蓝莓蓝莓蓝莓蓝莓蓝莓</dd>
                    <span class="iconfont icon-favorite
												"></span>
                    <dd>888</dd>
                    <span class="iconfont icon-dianzan
												"></span>
                    <dd>888</dd>
                </dl>
                <dl class="active">
                    <dt><img src="img/wanted1.jpg" ></dt>
                    <dd>蓝蓝莓蓝莓莓</dd>
                    <dd>蓝莓蓝莓蓝蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓莓蓝莓蓝莓蓝莓蓝莓蓝莓</dd>
                    <span class="iconfont icon-favorite
																"></span>
                    <dd>888</dd>
                    <span class="iconfont icon-dianzan
																"></span>
                    <dd>888</dd>
                </dl>
                <dl class="active">
                    <dt><img src="img/wanted1.jpg" ></dt>
                    <dd>蓝蓝莓蓝莓莓</dd>
                    <dd>蓝莓蓝莓蓝蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓莓蓝莓蓝莓蓝莓蓝莓蓝莓</dd>
                    <span class="iconfont icon-favorite
																				"></span>
                    <dd>888</dd>
                    <span class="iconfont icon-dianzan
																				"></span>
                    <dd>888</dd>
                </dl>
                <dl class="active">
                    <dt><img src="img/wanted1.jpg" ></dt>
                    <dd>蓝蓝莓蓝莓莓</dd>
                    <dd>蓝莓蓝莓蓝蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓莓蓝莓蓝莓蓝莓蓝莓蓝莓</dd>
                    <span></span>
                    <dd>888</dd>
                    <span></span>
                    <dd>888</dd>
                </dl>
                <dl class="active">
                    <dt><img src="img/wanted1.jpg" ></dt>
                    <dd>蓝蓝莓蓝莓莓</dd>
                    <dd>蓝莓蓝莓蓝蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓莓蓝莓蓝莓蓝莓蓝莓蓝莓</dd>
                    <span></span>
                    <dd>888</dd>
                    <span></span>
                    <dd>888</dd>
                </dl>
                <dl class="active">
                    <dt><img src="img/wanted1.jpg" ></dt>
                    <dd>蓝蓝莓蓝莓莓</dd>
                    <dd>蓝莓蓝莓蓝蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓莓蓝莓蓝莓蓝莓蓝莓蓝莓</dd>
                    <span></span>
                    <dd>888</dd>
                    <span></span>
                    <dd>888</dd>
                </dl>
            </div>

            <div>
                <dl class="active">
                    <dt><img src="img/wanted2.jpg" ></dt>
                    <dd>蓝蓝莓蓝莓莓</dd>
                    <dd>蓝莓蓝莓蓝蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓莓蓝莓蓝莓蓝莓蓝莓蓝莓</dd>
                    <span></span>
                    <dd>888</dd>
                    <span></span>
                    <dd>888</dd>
                </dl>

            </div>

            <div>
                <dl class="active">
                    <dt><img src="img/wanted3.jpg" ></dt>
                    <dd>蓝蓝莓蓝莓莓</dd>
                    <dd>蓝莓蓝莓蓝蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓莓蓝莓蓝莓蓝莓蓝莓蓝莓</dd>
                    <span></span>
                    <dd>888</dd>
                    <span></span>
                    <dd>888</dd>
                </dl>

            </div>

            <div>
                <dl class="active">
                    <dt><img src="img/wanted4.jpg" ></dt>
                    <dd>蓝蓝莓蓝莓莓</dd>
                    <dd>蓝莓蓝莓蓝蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓莓蓝莓蓝莓蓝莓蓝莓蓝莓</dd>
                    <span></span>
                    <dd>888</dd>
                    <span></span>
                    <dd>888</dd>
                </dl>
                <dl class="active">
                    <dt><img src="img/wanted4.jpg" ></dt>
                    <dd>蓝蓝莓蓝莓莓</dd>
                    <dd>蓝莓蓝莓蓝蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓莓蓝莓蓝莓蓝莓蓝莓蓝莓</dd>
                    <span></span>
                    <dd>888</dd>
                    <span></span>
                    <dd>888</dd>
                </dl>
                <dl class="active">
                    <dt><img src="img/wanted4.jpg" ></dt>
                    <dd>蓝蓝莓蓝莓莓</dd>
                    <dd>蓝莓蓝莓蓝蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓莓蓝莓蓝莓蓝莓蓝莓蓝莓</dd>
                    <span></span>
                    <dd>888</dd>
                    <span></span>
                    <dd>888</dd>
                </dl>
                <dl class="active">
                    <dt><img src="img/wanted4.jpg" ></dt>
                    <dd>蓝蓝莓蓝莓莓</dd>
                    <dd>蓝莓蓝莓蓝蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓蓝莓莓蓝莓蓝莓蓝莓蓝莓蓝莓</dd>
                    <span></span>
                    <dd>888</dd>
                    <span></span>
                    <dd>888</dd>
                </dl>
            </div>
        </div>
    </main>




    <footer>
        <ul class="foo">
            <li><a href="#"><span class="iconfont icon-gouwo"></span>首页</a></li>
            <li><a href="#"><span class="iconfont icon-fenlei"></span>分类</a></li>
            <li><a href="#"><span class="iconfont icon-wode
"></span>我的</a></li>
            <li><a href="#"><span class="iconfont icon-rementuijian
"></span>推荐</a></li>
        </ul>
    </footer>
    <script src="js/shouye.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/js1/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    <!-- <script src="js/axios.js" type="text/javascript" charset="utf-8"></script> -->
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            slidesPerView: 1,
            paginationClickable: true,
            spaceBetween: 30,
            loop: true
        });
        </script>
</body>
</html>